<script setup>
import ShowNames from './ShowNames.vue'
console.info('Hello About....')
const names = ['张三', '李四', '王五', '赵六', '孙七']
</script>
<template>
  <div style="height: 100px;">
    Hello About
    <div>
      <hr>
      <show-names :names="names">
        <template #default="name">
          <p>{{ name.item }}-{{ name.index }}</p>
        </template>
      </show-names>
      <hr>
      // 如果我们有默认插槽和具名插槽，那么按照完整的template来编写
      <show-names :names="names">
        <template #default="slotProps">
          <span>{{ slotProps.item }}---{{ slotProps.index }}</span>
        </template>
      </show-names>
      <hr>
      // 果我们的插槽只有默认插槽时，组件的标签可以被当做插槽的模板来使用，这样，我们就可以将 v-slot 直 接用在组件上
      <show-names v-slot="slotProps" :names="names">
        <button>{{ slotProps.item }}-{{ slotProps.index }}</button>
      </show-names>
      <hr>
      // 如果我们的插槽是默认插槽default，那么在使用的时候 v-slot:default="slotProps"可以简写为vslot="slotProps"：
      <show-names :names="names">
        <template #default="slotProps">
          <button>{{ slotProps.item }}-{{ slotProps.index }}</button>
        </template>
        <template #lisi>
          <h2>我是name的插入内容</h2>
        </template>
      </show-names>
    </div>
  </div>
</template>